<template>
  <div>
    <div>
      <el-card style="margin: 20px 50px">
        <el-form :inline="true">
<!--          <el-form-item label="成本分析查看类型">-->
<!--            <el-select @change="changeRegion" v-model="queryInfo.type1" placeholder="请选择">-->
<!--              <el-option label="按月份查看" value="3"></el-option>-->
<!--              <el-option label="按季度查看" value="2"></el-option>-->
<!--              <el-option label="按年份查看" value="1"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label="区域">
            <el-select v-model="queryInfo.qy" placeholder="请选择" @change="changeQy()" ref="qySelect">
              <el-option label="东部探井" value="1"></el-option>
              <el-option label="东部常规" value="2"></el-option>
              <el-option label="东部非常规" value="3"></el-option>
              <el-option label="东部勘探工作量完成情况" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型" v-if="queryInfo.qy == '' || queryInfo.qy !== '4' ">
            <el-select v-model="queryInfo.lx" placeholder="请选择">
              <el-option label="投资及工作量完成情况" value="1"></el-option>
              <el-option label="成本分析" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间选择">
            <el-date-picker
              v-model="startEndTime"
              @change="changeTime"
              value-format="yyyy-MM"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份">
            </el-date-picker>
          </el-form-item>
          <el-radio v-model="barOrLine" label="bar">柱状图</el-radio>
          <el-radio v-model="barOrLine" label="line">折线图</el-radio>
          <el-button @click="drawCharts" type="primary">查询</el-button>
        </el-form>
      </el-card>
    </div>
    <div style="display: flex;flex-wrap: wrap">
      <el-card v-show="this.firstOrSecond == 1" style="margin: 50px;width: 100%">
        <div id="firstMain" style="width: 100%; height: 500px;"></div>
      </el-card>
      <el-card v-show="this.firstOrSecond == 2" style="margin: 50px;width: 100%">
        <div id="secondMain" style="width: 100%; height: 500px;"></div>
      </el-card>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
import { getIndexList } from "@/api/vadmin";
import { Decrypt } from "@/utils/AesHmacMD5";
import { push } from "echarts/lib/component/dataZoom/history";


export default {
  name: 'indexEcharts',
  data() {
    return {
      startEndTime: '',
      queryInfo: {
        qy: '1', //选择框1
        lx: '1', //选择框2
        startTime:'2024-01', //开始时间
        endTime: '2024-11', //结束时间
      },
      title: '', //图表名称
      barOrLine: 'bar', //柱状图或者折线图

      //判断第一还是第二
      firstOrSecond: '',
    };
  },
  mounted() {
    this.getIndexList()
    this.drawCharts()
  },
  methods: {
    changeTime() {
      this.queryInfo.startTime = this.startEndTime[0]
      this.queryInfo.endTime = this.startEndTime[1]
    },
    drawCharts() {
      if(this.queryInfo.qy == 4) this.queryInfo.lx = '1'

      this.firstOrSecond = this.queryInfo.lx
      this.getIndexList()
    },
    //区域选择框时间
    changeQy() {
      // 通过选中的 value 查找对应的 label
      const selectedOption = this.$refs.qySelect.options.find(option => option.value === this.queryInfo.qy);
      this.title = selectedOption.label
      // console.log('所选的label:', selectedOption ? selectedOption.label : '');
    },

    //获取成本分析===>东部探井成本分析
    getIndexList() {
      if(this.queryInfo.qy == 4) this.queryInfo.lx = '1'
      getIndexList(this.addDateRange(this.queryInfo)).then(res => {
        let resData =  JSON.parse(Decrypt(res.data))
        console.log(this.queryInfo,resData, '===============>');
        if(this.queryInfo.qy == 4) {
          //投资y轴数据
          let tzYData = []
          //探井口数y轴数据
          let tjksYData = []
          //探井进尺y轴数据
          let tjjcYData = []
          resData.results.y_weeks.map(item => {
            tzYData.push(item[0])
            tjksYData.push(item[1])
            tjjcYData.push(item[2])
          })

          this.$nextTick(() => {
            this.initFirstChart(resData.results.x_weeks,tzYData,tjksYData,tjjcYData,'firstMain', this.title + '投资工作量分析')
          });
        }else if(this.queryInfo.lx == 1) {
          //投资y轴数据
          let tzYData = []
          //探井口数y轴数据
          let tjksYData = []
          //探井进尺y轴数据
          let tjjcYData = []
          resData.results.y_weeks.map(item => {
            tzYData.push(item[0])
            tjksYData.push(item[1])
            tjjcYData.push(item[2])
          })

          this.$nextTick(() => {
            this.initFirstChart(resData.results.x_weeks,tzYData,tjksYData,tjjcYData,'firstMain', this.title + '投资工作量分析')
          });
        }else if (this.queryInfo.lx == 2) {
          console.log('选择的是成本分析');
          let yData = resData.results.y_weeks.flat()

          this.$nextTick(() => {
            this.initSecondChart(resData.results.x_weeks,yData,'secondMain', this.title + '成本分析')
          });

        }

      })
    },


    //投资工作量图表
    initFirstChart(xData, tzYData, tjksYData,tjjcYData,id,title) {
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let option;
      const colors = ['#5470C6', '#30b905', '#ff0000'];
      option = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%',
          top: '20%',
          bottom: '10%',
          containLabel: true
        },
        title: {
          text: title
        },
        legend: {
          left: '40%',
          data: ['探井口数', '探井进尺', '投资']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            // prettier-ignore
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '探井(口数)',
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '探井进尺(万米)',
            position: 'right',
            alignTicks: true,
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '金额(万元)',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[2]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '探井口数',
            type: this.barOrLine,
            data: tjksYData,
            barWidth: 15,
            label: {
              show: true,
              position: 'top',  // 设置标签显示在柱子上方
              formatter: '{c}',  // 显示柱子上的数值
              color: colors[0],  // 设置字体颜色
              fontSize: 12  // 设置字体大小
            },
            itemStyle: {
              color: colors[0]
            },
            barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
          },
          {
            name: '探井进尺',
            type: this.barOrLine,
            yAxisIndex: 1,
            data: tjjcYData,
            barWidth: 15,
            label: {
              show: true,
              position: 'top',  // 设置标签显示在柱子上方
              formatter: '{c}',  // 显示柱子上的数值
              color: colors[1],  // 设置字体颜色
              fontSize: 12  // 设置字体大小
            },
            itemStyle: {
              color: colors[1]
            },
            barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
          },
          {
            name: '投资',
            type: 'line',
            yAxisIndex: 2,
            data: tzYData,
            label: {
              show: true,
              position: 'top',  // 设置标签显示在柱子上方
              formatter: '{c} 万元',  // 显示柱子上的数值
              color: colors[2],  // 设置字体颜色
              fontSize: 12  // 设置字体大小
            },
            itemStyle: {
              color: colors[2]
            }
          }
        ],

      };

      option && myChart.setOption(option);

      myChart.on('dblclick', function(params) {
        console.log(params,'======>图表点击事件');
        console.log(params.dataIndex, '================>');
      } )


    },

    //成本分析图表
    initSecondChart(xData, yData,id,title) {
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let option;
      // 线性渐变色的设置
      const gradientColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#83bff6' }, // 起始颜色
        { offset: 1, color: '#188df0' }  // 结束颜色
      ]);

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // 自定义提示框的显示格式
          formatter: function (params) {
            // 只显示第一个系列的数据
            let firstSeries = params[0];
            let color = firstSeries.color;  // 获取该系列的颜色

            // 返回带颜色小圆点的HTML格式
            return `<span style="display:inline-block;width:10px;height:10px;background-color:#188df0;border-radius:50%;margin-right:5px;"></span>`
              + '金额' + ': ' + firstSeries.value + ' 元/(米)';
          }
        },
        legend: {
          data: '金额(万元)'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        title: {
          text:title
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额(元)',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            type: this.barOrLine,
            barWidth: '30%',
            itemStyle: {
              // 使用线性渐变色
              color: '#4F81BD'
            },
            label: {
              show: true,
              position: 'top',  // 设置标签显示在柱子上方
              formatter: '{c} 元/(米)',  // 显示柱子上的数值
              color: '#ff0000',  // 设置字体颜色
              fontSize: 12  // 设置字体大小
            },
            data: yData
          },
          {
            type: 'line',
            barWidth: '30%',
            itemStyle: {
              // 使用线性渐变色
              color: '#ff0000'
            },
            data: yData
          }
        ]
      };

      option && myChart.setOption(option);

    },

  }
}
</script>

<style scoped>
</style>
